<script lang="ts" setup>
import type { Exposed, OpenData } from './type'
import { Modal } from 'ant-design-vue'
import { ref, type MediaHTMLAttributes } from 'vue'
import { defaultModalProps } from '@/constants/comp-setting'

defineOptions({
  name: 'VideoPreviewModal',
})
const open = ref(false)
const currentItem = ref<INullable<OpenData>>()
const opts = computed<MediaHTMLAttributes>(() => {
  if (currentItem.value && currentItem.value.autoplay) {
    return {
      autoplay: true,
      muted: true,
    }
  }
  return {}
})
defineExpose<Exposed>({
  open(_data) {
    currentItem.value = _data
    open.value = true
  },
})

function handleCancel() {
  open.value = false
  currentItem.value = null
}
</script>

<template>
  <Modal v-bind="defaultModalProps" v-model:open="open" title="视频预览" :footer="null" @cancel="handleCancel">
    <div class="box-border">
      <video v-bind="opts" :src="currentItem?.url" controls class="block w-full h-full object-contain" />
    </div>
  </Modal>
</template>
